<template>
	<div class="tree-box">
		<el-scrollbar class="tree-scrollbar">
			<el-tree
				ref="treeRef"
				:data="treeData"
				:node-key="nodeKey"
				:props="defaultProps"
				:expand-on-click-node="false"
				:default-expand-all="isOpen"
				:default-expanded-keys="expandedNodes"
				:default-checked-keys="checkNodes"
				:empty-text="emptyText"
				:lazy="lazyLoad"
				:load="loadNode"
				@node-click="nodeClick"
				:show-checkbox="showCheckbox"
				@check="checkedEvent"
				highlight-current
				:check-strictly="checkStrictly"
			/>
		</el-scrollbar>
	</div>
</template>

<script setup lang="ts">
import type { ElTree } from "element-plus";
interface Tree {
	[key: string]: any;
}
const props = defineProps({
	//每个树节点用来作为唯一标识的属性
	nodeKey: {
		type: String,
		default: "nodeCode"
	},
	//默认展开的节点
	defaultExpandedNodes: {
		type: Array,
		default: () => {
			return [];
		}
	},
	// 默认选中节点
	defaultCheckExpandedNodes: {
		type: Array,
		default: () => {
			return [];
		}
	},
	//配置选项
	defaultProps: {
		type: Object,
		default: () => {
			return {
				children: "children",
				label: "nodeName",
				isLeaf: "leaf"
			};
		}
	},
	// 树的数据
	treeData: {
		type: Array,
		default: () => {
			return [];
		}
	},
	// 是否展示多选框
	showCheckbox: {
		type: Boolean,
		default: false
	},
	// 是否需要懒加载
	lazyLoad: {
		type: Boolean,
		default: false
	},
	// 是否需要懒加载搜索
	lazySearch: {
		type: Boolean,
		default: false
	},

	// 是否展开节点
	isOpen: {
		type: Boolean,
		default: false
	},

	// 是否严格遵循父子互相关联
	checkStrictly: {
		type: Boolean,
		default: true
	}
});
const emit = defineEmits(["node-click", "load", "check", "search"]);
const treeRef = ref<InstanceType<typeof ElTree>>();
const expandedNodes = computed<any>(() => props.defaultExpandedNodes);
const checkNodes = computed<any>(() => props.defaultCheckExpandedNodes);
const emptyText = ref("数据加载中..."); // // 数据为空时显示文本
watch(
	() => props.treeData,
	val => {
		if (val.length === 0) {
			emptyText.value = "暂无数据";
		}
	}
);

//懒加载树
const loadNode = (node: Tree, resolve: (data: Tree[]) => void) => {
	nextTick(() => {
		emit("load", node, resolve);
	});
};
//当节点被点击的时候触发
const nodeClick = (data: Tree) => {
	emit("node-click", data);
};
//点击节点复选框之后触发
const checkedEvent = (currentData: Tree, checkDatas: Tree) => {
	emit("check", currentData, checkDatas);
};

defineExpose({});
</script>

<style scoped lang="scss">
.tree-box {
	width: 294px;
	height: 100%;
	margin-right: 12px;
	padding: 18px 20px;
	background-color: var(--bg-color);
	flex: none;
	display: flex;
	flex-direction: column;
	.el-tree {
		background-color: var(--bg-color);
	}
	.tree-search {
		margin-bottom: 20px;
	}
	.tree-scrollbar {
		flex: 1;
	}
	:deep(.el-tree) {
		display: inline-block;
		min-width: 100%;
	}
}
::v-deep {
	.el-tree-node__content:hover,
	.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
		background-color: var(--bg-transfer-panel-header-color);
	}
	.el-tree-node__label {
		color: var(--font-second-color);
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 13px;
		line-height: 0px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.el-checkbox__input.is-checked .el-checkbox__inner:after {
		background: none;
		font-family: "iconfont";
		color: var(--el-checkbox-checked-bg-color);
		font-size: 24px;
		content: "\e60e";
		transition: none;
		transform: none;
		width: auto;
		border: none;
		left: -4px;
		top: -7px;
	}
	.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-disabled .el-checkbox__inner {
		border-color: var(--border-switch-disabled-color);
	}
	.el-tree-node__expand-icon {
		color: var(--font-second-color);
	}
}
</style>
